<template>
  <div class="setting">
      <headnav></headnav>
      <div class="main">
         <h3><i class="el-icon-back" @click="back"></i>&ensp;{{name}}</h3>
           <!-- <el-button-group class="btngroup">
            <el-button type="primary" icon="el-icon-plus" @click="addsource()" >新增源表</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addrelative()" >新增关联</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addlogger()" >新增记录</el-button>
          </el-button-group> -->
          <el-row>
            <el-col :span="16">
              <el-table
            border
            size="mini"
            :data="tableData"
            class="table1"
            :header-cell-style="rowClass"
            style="width: 100%">
             <el-table-column 
              label="源表列表"
              align="center"
              >
               <el-table-column
              prop="sourceTableName"
              label="中文名称"
              align="center"
              width="200">
              <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.sourceTableName" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.sourceTableName }}</span>
              </template>
            </template>
            </el-table-column>
            <el-table-column
              prop="sourceTableCode"
              label="英文名称"
              align="center"
              >
              <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.sourceTableCode" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.sourceTableCode }}</span>
              </template>
            </template>
            </el-table-column>
            <!-- <el-table-column
              prop="sourceAlias"
              label="源表别名"
              align="center"
              >
              <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.sourceAlias" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.sourceAlias }}</span>
              </template>
            </template>
            </el-table-column> -->
            <!-- <el-table-column
             prop="sourceFilter"
             align="center"
              label="过滤操作">
              <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.sourceFilter" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.sourceFilter }}</span>
              </template>
            </template>
            </el-table-column> -->
            <el-table-column
              label="操作"
              align="center"
              >
              <template slot-scope="scope">
                <el-button @click="scope.row.is_edit = true" type="text" size="small" v-if="scope.row.is_edit==false">编辑</el-button>
                 <el-button v-if="scope.row.is_edit" @click="scope.row.is_edit = false" type="text" size="small">保存</el-button>
                <el-button @click="deleteRow(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table-column>
          </el-table>
            </el-col>
            <el-col :span="8">
              <!-- <el-table
            border
            size="mini"
            :data="tableData2"
            :header-cell-style="rowClass2"
            style="width: 100%">
             <el-table-column 
              label="关联关系"
              align="center"
              >
              <el-table-column
              prop="step"
              label="执行步骤"
              align="center"
              width="80">
              </el-table-column>
              <el-table-column
              prop="relCondition"
              label="条件"
              align="center"
              width="200">
              <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.relCondition" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.relCondition }}</span>
              </template>
            </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              >
              <template slot-scope="scope">
                <el-button @click="scope.row.is_edit = true" type="text" size="small" v-if="scope.row.is_edit==false">编辑</el-button>
                 <el-button v-if="scope.row.is_edit" @click="scope.row.is_edit = false" type="text" size="small">保存</el-button>
                <el-button @click="deleteRow1(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table-column>
          </el-table> -->
            </el-col>
          </el-row>
           <el-table
            border
            size="mini"
            :data="tableData3"
            :header-cell-style="rowClass3"
            style="width: 100%">
             <el-table-column 
             type="index"
             align="center"
              label="序号"
              width="50">
          </el-table-column>
          <el-table-column 
              label="目标表"
              align="center"

              >
              <el-table-column 
                prop="goalFiledName"
                  label="字段中文名"
                  width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input size="small" v-model="scope.row.goalFiledName" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.goalFiledName }}</span>
                    </template>
                  </template>
              </el-table-column>
              <el-table-column 
                prop="goalFiledCode"
                  label="字段英文名"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input size="small" v-model="scope.row.goalFiledCode" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.goalFiledCode }}</span>
                    </template>
                  </template>
              </el-table-column>
              <el-table-column 
                prop="goalFiledType"
                  label="字段类型"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input size="small" v-model="scope.row.goalFiledType" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.goalFiledType }}</span>
                    </template>
                  </template>
              </el-table-column>
          </el-table-column>
          <el-table-column 
              label="源表"
              align="center"
              >
              <el-table-column 
                prop="sourceTableAlias"
                  label="源表来源"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input size="small" v-model="scope.row.sourceTableAlias" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.sourceTableAlias }}</span>
                    </template>
                  </template>
              </el-table-column>
              <!-- <el-table-column 
                prop="sourceFiledCode"
                  label="源表英文字段名"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input size="small" v-model="scope.row.sourceFiledCode" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.sourceFiledCode }}</span>
                    </template>
                  </template>
              </el-table-column> -->
              <!-- <el-table-column 
                prop="filedProcess"
                  label="字段加工逻辑"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input  size="small" v-model="scope.row.filedProcess" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.filedProcess }}</span>
                    </template>
                  </template>
              </el-table-column> -->
          </el-table-column>
          <div v-if="isEdit">
                  <el-table-column 
              label="变更记录"
              align="center"
              >
              <el-table-column 
                prop="updateBy"
                  label="变更人"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input size="small" v-model="scope.row.updateBy" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.updateBy }}</span>
                    </template>
                  </template>

              </el-table-column>
              <el-table-column 
                prop="updateTm"
                  label="变更时间"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input size="small" v-model="scope.row.updateTm" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.updateTm }}</span>
                    </template>
                  </template>
              </el-table-column>
              <el-table-column 
                prop="updateNum"
                  label="当前变更次数"
                  align="center"
                  width="120">
                   <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input size="small" v-model="scope.row.updateNum" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.updateNum }}</span>
                    </template>
                  </template>
              </el-table-column>
              <el-table-column 
                prop="updateDesc"
                  label="变更说明"
                  align="center"
                  width="120">
                   <template slot-scope="scope">
                    <template v-if="scope.row.is_edit">
                      <el-input size="small" v-model="scope.row.updateDesc" ></el-input>
                    </template>
                    <template v-else>
                      <span >{{ scope.row.updateDesc }}</span>
                    </template>
                  </template>
              </el-table-column>
          </el-table-column>
          </div>

            <el-table-column
              label="操作"
              align="center"
              >
              <template slot-scope="scope">
                <el-button @click="scope.row.is_edit = true" v-if="scope.row.is_edit==false" type="text" size="small">编辑</el-button>
                 <el-button v-if="scope.row.is_edit" @click="scope.row.is_edit = false" type="text" size="small">保存</el-button>
                <el-button @click="deleteRow2(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
            
          </el-table>
          
          <div class="btnsunb">
            <el-button type="primary">提交</el-button>
          </div>
      </div>
     
  </div>
</template>

<script>
import headnav from '@/components/HeadNav'
export default {
  name: 'DecSetting',
   components:{
    headnav
  },
   data () {
        return {
          isEdit:false,
          spanArr:[],
          pos:0,
          form:{
            id:"",
            dbName:"",
            tableName:"",
            goalTableName:'',
            isIncrement:'1',
            isPartition:'1',
            PartitionFiled:"DT",
            jobCron:''
          },
            name:"",
            tableData: [{
            id:0,
            sourceTableCode: '',
            is_edit:true,
            sourceTableName: '',
            sourceAlias:"",
            sourceFilter:''
          }],
          tableData2: [{
            id:0,
            step:"步骤1",
            relCondition: '',
            is_edit:true,
          }, ],

          tableData3:[
            {
              id:0,
              goalFiledName: '',
              goalFiledCode: '',
              goalFiledType: '',
              sourceTableAlias: '',
              sourceFiledCode: '',
              filedProcess: '',
              updateBy: '',
              updateTm: '',
              updateNum: '',
              updateDesc: '',
              is_edit:true,
            },
          ],
          tableData4:[
            {
              sourceTableCode:"dwb_test_001",
              sourceTableName:"dwb测试表-001",
              sourceAlias:"t1",
              sourceFilter:"where dt = 'yesterday'",
            },
            {
              sourceTableCode:"tmp_test_002",
              sourceTableName:"tmp测试表-002",
              sourceAlias:"t2",
              sourceFilter:"",
            }
          ],
          tableData5:[
            {
              step:"步骤1",
              relCondition:"t1 left join t2 on t1.id = t2.id"
            }
          ],
          tableData6:[
            {
              goalFiledName:"测试字段1",
              goalFiledCode:"filed_001",
              goalFiledType:"string",
              sourceTableAlias:"t1",
              sourceFiledCode:"dwb_filed_001",
              filedProcess:"`SUM`(dwb_filed_001)",
              updateBy:"yanzhi",
              updateTm:"2018-08-24 15:56:02",
              updateNum:1,
              updateDesc:"new"
            },
            {
              goalFiledName:"测试字段2",
              goalFiledCode:"filed_002",
              goalFiledType:"bigint",
              sourceTableAlias:"t2",
              sourceFiledCode:"tmp_filed_002",
              filedProcess:"直接抽取",
              UpdateBy:"yanzhi",
              updateTm:"2018-08-24 15:56:02",
              updateNum:1,
              updateDesc:"new",
            }
          ],
        }
    },
    mounted(){
        console.log(this.$route.query.title);
        if(this.$route.query.handle=="edit"){
          this.isEdit=true;
          this.tableData=this.tableData4
          this.tableData2=this.tableData5
          this.tableData3=this.tableData6
        }
        this.name=this.$route.query.title;
    },
   
    methods:{
        addsource(){
          let id=this.tableData.length
          this.tableData.push(
            {
              id:id,
            sourceTableCode: '',
            is_edit:true,
            sourceTableName: '',
            sourceFilter:''
          }
          )
        },
        addrelative(){
          let id=this.tableData2.length;
          let step='步骤'+(this.tableData2.length+1)
          this.tableData2.push({
              id:id,
              step:step,
            relCondition: '',
            is_edit:true,
          })
        },
        addlogger(){
          let id=this.tableData3.length
          this.tableData3.push({
              id:id,
            goalFiledName: '',
              goalFiledCode: '',
              goalFiledType: '',
              sourceTableAlias: '',
              sourceFiledCode: '',
              filedProcess: '',
              updateBy: '',
              updateTm: '',
              updateNum: '',
              updateDesc: '',
              is_edit:true,
          })
        },
        deleteRow: function(id) {
				//提交，成功后,更新数据
				//  alert(index1);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
          for(var i = 0; i < this.tableData.length; i++) {
							if(this.tableData[i].id == id) {
								this.tableData.splice(i, 1);
							}
						}
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
				
      },
      deleteRow1: function(id) {
				//提交，成功后,更新数据
				//  alert(index1);
				console.log(id);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
          for(var i = 0; i < this.tableData2.length; i++) {
							if(this.tableData2[i].id == id) {
								this.tableData2.splice(i, 1);
							}
						}
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
				
      },
      rowClass({ row, rowIndex}) {
        console.log(rowIndex) //表头行标号为0
        return 'background: #409EFF;border-color:"#ddd";color: white;'
      },
      rowClass2({ row, rowIndex}) {
        console.log(rowIndex) //表头行标号为0
        return 'background: #67C23A;color: white;'
      },
      rowClass3({ row, rowIndex}) {
        console.log(rowIndex) //表头行标号为0
        return 'background: #E6A23C;color: white;'
      },
      deleteRow2: function(id) {
				//提交，成功后,更新数据
				//  alert(index1);
				console.log(id);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
          for(var i = 0; i < this.tableData3.length; i++) {
							if(this.tableData3[i].id == id) {
								this.tableData3.splice(i, 1);
							}
						}
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
				
			},
        back(){
          console.log(this.$store.state.formType.conType)
          this.$store.commit('changetab',{isSuccess:true,tabindex:1});
            this.$router.push({path:"/dataModel",query:{activenavIndex:'2'}})
        },
        onSubmit(){

        },
    }
}
</script>

<style scoped>
.main{
  padding: 8px;
}
.btnsunb{
  text-align: center;
  padding: 10px;
}
.btngroup{
  padding: 8px 0px;
}
.main .el-input .el-input__inner{
  height: 30px!important;
  line-height: 30px!important;
}
.table1 th{

}
</style>